<template>
  <div id="app">
    <div>
      <!-- 头部标签 -->
      <van-nav-bar fixed>
        <template #left>
          <!-- <img class="logo" src="../../assets/toutiao_logo.png" alt="" /> -->
          <img class="logo" :src="imgObj" />
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="$router.push('/search')" />
        </template>
      </van-nav-bar>
      <!-- 频道部分 -->
      <van-tabs v-model="channelId" animated sticky offset-top="1.226667rem">
        <van-tab v-for="item in channelList" :key="item.id" :title="item.name" :name="item.id">
          <!-- 内容部分 -->
          <ArticleList :chnId="channelId"></ArticleList>

        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="up" />
      <!-- 弹出层 -->
      <van-popup v-model="show" class="edit_wrap">
        <!-- 弹出层的主体区域 -->
        <ChannelItem :userChannelList="channelList" @add='addFn' @removeFn='remove' @closeFn='close' v-model="channelId"></ChannelItem>
      </van-popup>
    </div>

  </div>
</template>

<script>
import { MyNotify } from '@/utils/Notify.js'
import ChannelItem from './channel-item.vue'
import { getAllChannelListApi, updateChannelAPI } from '@/api/home.js'
import logoPng from '../../assets/toutiao_logo.png'
import ArticleList from '@/view/Home/AticleList.vue'
const cObj = {}
export default {
  name: 'Home',
  data() {
    return {
      imgObj: logoPng,
      channelId: 0,
      channelList: [],
      show: false
    }
  },
  async created() {
    const res = await getAllChannelListApi()
    this.channelList = res.data.data.channels
    console.log(this.channelList)
  },
  components: {
    ArticleList,
    ChannelItem
  },
  methods: {
    up() {
      this.show = true
    },
    async update() {
      const newArr = this.channelList.map(obj => {
        const newObj = { ...obj }
        return newObj
      })
      const index = newArr.findIndex(obj => obj.id === 0)
      newArr.splice(index, 1)
      newArr.forEach((obj, index) => {
        obj.seq = index + 1
        delete obj.name
      })
      const res = await updateChannelAPI({
        channels: newArr
      })
      console.log(res)
      if (res.data.message === '更新用户频道成功') {
        // 3. 通过 notify 弹框提示用户更新成功
        MyNotify({ type: 'success', message: '更新成功', duration: 1000 })
      }
    },
    async addFn(obj) {
      this.channelList.push(obj)
      // 数组的map方法浅复制了channelList
      this.update()
    },
    remove(obj) {
      const index = this.channelList.findIndex(item => item.id === obj.id)
      this.channelList.splice(index, 1)
      this.update()
    },
    close() {
      this.show = false
      // 也可以用ref来获取chnanel-item的子组件的dom元素，再操作它的isEdit
    }
    // changeID(id) {
    //   this.channelId = id
    // }
    // 设置滚动位置保存在路由对象信息里meta
    // 路由离开 - 触发(保存滚动位置)
  },
  beforeRouteLeave(to, from, next) {
    // 第一步将当前滚动条位置保存到路由对象信息meta里
    // from.meta就是当前页面的路由信息对象
    from.meta.top = window.scrollY
    next() // 才能离开
  },
  watch: {
    channelId(newValue, oldValue) {
      cObj[oldValue] = window.scrollY
      setTimeout(() => {
        window.scrollTo(0, cObj[newValue])
      })
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
/deep/ .van-tabs__content {
  padding-top: 46px;
}
// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}
/* 频道编辑弹出层铺满屏幕 */
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
